<template>
	<view style="padding: 20px; background-color: #c6e2ff; height: 100vh;">
		<view style="background-color: white; border-radius: 10px;padding: 20px;">
			<u--form
							labelPosition="left"
							:model="user"
							:rules="rules"
							ref="uForm"
							labelWidth="80px"
					>
						<u-form-item
								label="姓名"
								prop="user.name"
								borderBottom
								ref="item1"
						>
							<u--input
									v-model="user.name"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="性别"
								prop="user.sex"
								borderBottom
								@click="showSex = true; hideKeyboard()"
								ref="item1"
						>
							<u--input
									v-model="user.sex"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择性别"
									border="none"
							></u--input>
							<u-icon
									slot="right"
									name="arrow-right"
							></u-icon>
						</u-form-item>
						<u-form-item
								label="手机号码"
								prop="user.phone"
								borderBottom
								ref="item1"
						>
							<u--input
									v-model="user.phone"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="电子邮箱"
								prop="user.eamil"
								borderBottom
								ref="item1"
						>
							<u--input
									v-model="user.email"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="描述"
								prop="user.description"
								borderBottom
								ref="item1"
						>
							<u--textarea
								placeholder="请输入内容"
									v-model="user.description"
									>
							</u--textarea>
						</u-form-item>
						<u-form-item
								label="头像"
								prop="user.avatra"
								borderBottom
								ref="item1"
						>
							<u-upload
									:fileList="fileList"
									@afterRead="afterRead"
									@delete="deletePic"
									:maxCount="1"
								></u-upload>
						</u-form-item>
					</u--form>
		</view>
		
				<u-action-sheet
						:show="showSex"
						:actions="actions"
						title="请选择性别"
						description="如果选择保密会报错"
						@close="showSex = false"
						@select="sexSelect"
				>
				</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList:[],
				showSex: false,
				user:{
					name:"12121",
					sex:""
				},
				actions: [{
								name: '男',
								},
								{
									name: '女',
								},
								{
									name: '保密',
								},
							],
				rules: {
								'user.name': {
									type: 'string',
									required: true,
									message: '请填写姓名',
									trigger: ['blur', 'change']
								},
								'user.sex': {
									type: 'string',
									max: 1,
									required: true,
									message: '请选择男或女',
									trigger: ['blur', 'change']
								},
							},
			}
		},
		methods: {
			sexSelect(e){
				this.user.sex=e.name
			},
			// 删除图片
						deletePic(event) {
							console.log(event)
						},
			
			afterRead(event) {
				console.log(event)
			},
			
			uploadFile(url){
				uni.uploadFile({
					url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
											filePath: url,
											name: 'file',
											formData: {
												user: 'test'
											},
											success: (res) => {
												setTimeout(() => {
													resolve(res.data.data)
												}, 1000)
											}
				})
			}
			
			
		}
	}
</script>

<style>

</style>
